import React from 'react';

class Three extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            value: '',
            value2: '',
            isGoing: true,
            numberOfGuests: 2
        }
    }

    handleChange = (e) => {
        this.setState({ value: event.target.value });
    }

    handleChange2 = (e) => {
        this.setState({ value2: event.target.value });
    }

    handleInputChange = (e) => {

        var target = e.target;

        const value = target.type == 'checkbox' ? target.checked : target.value;

        const name = target.name;

        this.setState({
            [name]: value
        });
    }



    render() {
        return (
            <div>
                <input type="text" value={this.state.value} onChange={this.handleChange} />

                <select value={this.state.value2} onChange={this.handleChange2}>
                    <option value="grapefruit">葡萄柚</option>
                    <option value="lime">酸橙</option>
                    <option value="coconut">椰子</option>
                    <option value="mango">芒果</option>
                </select>

                <div>共用一个方法</div>

                <input
                    name="isGoing"
                    type="checkbox"
                    checked={this.state.isGoing}
                    onChange={this.handleInputChange} />

                <input
                    name="numberOfGuests"
                    type="number"
                    value={this.state.numberOfGuests}
                    onChange={this.handleInputChange} />

            </div>
        )
    }
}

export default Three;